<template>
  <div class="goods">
    <div class="goods-item">
      <div class="img-info">
        <el-carousel
          :interval="5000"
          arrow="always"
          height="43.19rem"
          @change="changeItem"
        >
          <el-carousel-item
            v-for="items in detail.goods"
            :key="items.id"
          >
            <img
              src="../../assets/topic/87@2x.png"
              alt=""
              class="tags"
            >
            <img
              :src="items.url"
              alt=""
              class="goods-img"
              @click="todetail(items)"
            >
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="intro">
        <div
          v-if="getGoods"
          class="name"
        >
          {{ getGoods.name }}
        </div>
        <div
          v-if="getGoods && getGoods.tags === 'undefined'"
          class="tags"
        >
          {{ getGoods.tags }}
        </div>
        <div
          v-if="getGoods"
          class="desc"
        >
          {{ getGoods.shortName }}
        </div>
        <div
          v-if="getGoods"
          class="price"
        >
          ￥{{ getGoods.fSalePrice }}
        </div>
        <div class="group">
          <span @click="tobuy(getGoods)">立即购买</span>
          <span @click="tocar(getGoods)">加入购物车</span>
        </div>
      </div>
    </div>
    <div class="collect">
      <div
        class="button"
        @click="collect"
      >
        {{ detail.is_collected ? "收藏成功" : "收藏" }}
      </div>
      <div class="read">
        {{ detail.collect }}人已收藏 {{ detail.look }}人浏览
      </div>
    </div>
    <Comment ref="comment" />
  </div>
</template>

<script>
import Comment from "./comment.vue";
export default {
  name: "",
  components: {
    Comment,
  },
  data() {
    return {
      active: 0,
      detail: { goods: [] },
    };
  },
  computed: {
    getGoods() {
      console.log('this.detail.goods', this.detail.goods)
      return this.detail.goods[this.active];
    },
  },
  methods: {
    getData(val) {
      this.detail = val;
      console.log('val', val)
      this.$refs.comment.getList(val.id, val.classs_id, val.shop_id);
    },
    changeItem(event) {
      this.active = event;
    },
    collect() {
      let param = {
        uid: JSON.parse(localStorage.getItem("userInfo")).mid,
        topic_id: this.detail.id,
      };
      this.$api.home.topicCollect(param).then((res) => {
        if (res.code == 1) {
          if (this.detail.is_collected == 0) {
            this.detail.is_collected = 1;
          } else {
            this.detail.is_collected = 0;
          }
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    tobuy(item) {
      let datas = {
        iSKUId: item.defaultSKUId,
        iProductId: item.id,
        onLineOffLine: 0,
        iQuantity: 1,
        dlyType: "EMS",
      };
      let obj = {
        item: datas,
      };
      let params = {
        token: localStorage.getItem("token"),
        data: obj,
      };
      this.$api.good.orderNow(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          let cardata = [
            {
              iSKUId: item.defaultSKUId,
              iProductId: item.id,
              onLineOffLine: 0,
              iQuantity: 1,
              dlyType: "EMS",
              id: res.data,
            },
          ];
          let subdata = {
            items: cardata,
            realProductAttribute: 1,
            wayOfOrder: 1,
          };
          let par = {
            token: localStorage.getItem("token"),
            data: subdata,
          };
          this.$api.good.GenerateOrderByShoppingCarts(par).then((resq) => {
            if (resq.code == 200) {
              this.$router.push({
                path: "/confirm_order",
              });
            } else {
              this.$message.error(resq.message);
            }
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },
    tocar(item) {
      let params = {
        token: localStorage.getItem("token"),
        data: [
          {
            iSKUId: item.defaultSKUId,
            iProductId: item.id,
            onLineOffLine: 0,
            iQuantity: 1,
            dlyType: "EMS",
          },
        ],
      };
      console.log("params", params);
      this.$api.good.addCarts(params).then((res) => {
        console.log("addCarts", res);
        if (res.code == 200) {
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    todetail(item) {
      this.$router.push({
        path: "/fruit/detail",
        query: { 
          id: item.id,
          iShopId: item.iShopId 
        },
      });
    },
  },
};
</script>

<style lang="scss">
.goods {
  margin-top: 2.13rem;
  display: flex;
  flex-direction: column;
  .goods-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 43.19rem;
    .img-info {
      width: 50%;
      height: 100%;
      .el-carousel__item {
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        .tags {
          position: absolute;
          top: 0.88rem;
          right: 0.88rem;
          width: 10.19rem;
        }
        .goods-img {
          width: 31rem;
          object-fit: contain;
          cursor: pointer;
        }
      }
      .el-carousel__indicator--horizontal {
        .el-carousel__button {
          width: 0.63rem;
          height: 0.63rem;
          background: rgba(6, 0, 2, 1);
          border-radius: 50%;
        }
        &.is-active {
          .el-carousel__button {
            width: 2.69rem;
            height: 0.63rem;
            background: rgba(50, 178, 161, 1);
            border-radius: 1rem;
          }
        }
      }
    }
    .intro {
      flex: 1;
      display: flex;
      flex-direction: column;
      text-align: center;
      padding: 0 7.31rem;
      height: 100%;
      align-items: center;
      background: #f3f3f3;
      .name {
        font-size: 1.5rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin-top: 12.12rem;
      }
      .tags {
        font-size: 1.13rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        padding: 0.63rem 1.31rem;
        background: rgba(50, 178, 161, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1.31rem;
      }
      .desc {
        font-size: 1.13rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin-top: 1.75rem;
      }
      .price {
        font-size: 1.99rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(240, 64, 111, 1);
        margin-top: 4.69rem;
      }
      .group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 5.88rem;
        width: 100%;
        span {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 12.5rem;
          height: 3.31rem;
          background: rgba(23, 23, 23, 1);
          font-size: 1.38rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          cursor: pointer;
        }
      }
    }
  }
  .collect {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 3.75rem;
    margin-bottom: 3.25rem;
    .button {
      font-size: 1.13rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      width: 11.56rem;
      height: 3rem;
      border-radius: 2rem;
      background: #7e8c8d;
      cursor: pointer;
    }
    .read {
      font-size: 1rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(243, 64, 111, 1);
      margin-top: 1.31rem;
    }
  }
}
</style>
